In order to understand the Web for a module, we must first understand what a Web frame is, much like
the browser window and web content modules, web frame represents an element of an electron up more
specifically the frame in which the browser loads its Web contents.
So a browser window being the renderer process itself responsible for everything we see when creating
an app window and is controlled by the main process.
Everything inside of that, such as the web content and the web frame being controlled by the browser
window instance, meaning the browser window creates a web frame in which to load its web contents.
This is a less used aspect of an app window, but nonetheless it's able to affect the rendering of the
Windows Web contents.
So worth going over.
If we look at the web frame documentation, this becomes a bit clearer.
The Web frame being responsible for things like the zoom level of the web content, managing the spelling
and grammar in the windows content or even checking the resource usage of the HTML content.
Let's see a few examples back in indexed HTML.
I'll start by getting rid of the link to render a script.
I'll just work in line for this lesson.
And as always, step one is requiring the web for a module const web frame.
From electron.
Then the first and arguably most used aspect of the web for a module is managing the rended zoom level
of the Windows content.
We can inspect this in the death tolls console to start with, save head over to the app, refresh to
update this renderer.
And now, very importantly, the Web frame module provides us two different units of measure with which
to get and set the zoom levels for a Windows Web contents, the first being the zoom factor.
I'll get the current zoom factor with web frame get zoom factor, which returns one zoom factor, then
being the current zoom percentage divided by 100.
In this case, the default zoom factor of one representing 100 percent assume factor of two would be
double this 200 percent and so on.
The default limits being between 50 percent and 300 percent.
The second unit in which we can get or set the content zoom is the zoom level.
Check that web frame.
Get zoom level.
Zero.
With each increment of one zoom level representing an increase of 20 percent, let's see both add an
image to better demonstrate the content.
Zoom in place of all this boilerplate content at http.
S place kitten dot com with a size of 450 by 300, then add some buttons with which to control the zoom.
The first having an unclick event attribute calling zoom up a function will create in a second labeled
increase zoom duplicate this with an unclick function of zoom down decrease zoom and lastly zoom reset
with the text reset zoom.
Add a break after this image to ensure the buttons fall below.
Next we can create the respective functions.
Const zoom up equals a function in which we can call on the web.
For instance, set zoom factor of the current zoom plus one which we can get as before with web frame
dot get zoom factor plus one.
Duplicate this for zoom down.
This time removing one from the zoom factor and lastly, zoom reset.
Which will simply set the zoom factor back to the default one, save this, reload the app, we get
the image with the buttons, get rid of this for now, click, increase, zoom.
And everything is scaled up to 200 percent, two times 100.
Same for decrease.
So whilst we're adjusting in 100 per cent increments here by adding and subtracting one from the zoom
factor each time, we can just as well use decimals to fine tune the zoom factor zoom level.
On the other hand, being much less granular but use a smaller increment by default.
I'll change these course to zoom level instead of zoom factor.
Save and try again.
Increase understand the jump is less severe, albeit only in 20 per cent increments, with reset zoom
now returning back to 120 per cent zoom or zoom level one.
The second method of this module that I want to demonstrate is get resource usage.
I'll simply log that out for now.
Web frame, dot, get resource usage.
This representing external or linked resources of the web content loaded into this web frame.
Save I'll open the death tolls back up, reload the content.
And there we get a breakdown of stylesheets, scripts, images and more telling us, for example, this
web content is loading one image with a size of three thousand four hundred and ninety six bytes.
So overall, a very simple module and honestly, not one to find used too often.
But should you need to make some content rendering adjustments or even sandbox some of the content JavaScript
for security reasons?
This is the module to use.